<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-20 16:16:08
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-06-20 18:47:01
 * @FilePath: \cip-admin\src\pages\park\dual-prevention\statistical-analysis\components\statistic.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-20 16:16:08
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-06-20 18:29:00
 * @FilePath: \cip-admin\src\pages\park\dual-prevention\statistical-analysis\components\statistic.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 表格组件 -->
<script lang="tsx" setup>
import type { TableColumnOption } from "@/components/table-widget/table-widget.vue";
import TableWidget from "@/components/table-widget/table-widget.vue";
import { whManagerBsTbRiskHazardsHandleGridTop5StatisticYearUsingPost, whManagerBsTbRiskHazardsHandleIndustryStatistic, whManagerBsTbRiskHazardsHandleLevelStatistic, whManagerBsTbRiskHazardsHandleStatusStatisticUsingPost, whManagerBsTbRiskHazardsHandleYearMonthStatistic } from "@/genapi/wh";
import { ref,onMounted } from "vue";
import { injectState } from "../state";
import bus from "vue3-eventbus";

defineOptions({ name: "Statistic" });

const {
	selectedList,
	tableRef,
	detailDialogRef,
	page: { records, isLoading, execute },
} = injectState()!;

watch(records, () => tableRef.value?.table?.clearSelection());

let value = ref([]);
let value2 = ref([]);
let value3 = ref([]);
let value4 = ref([]);
let year = ref('2024')
bus.on('getyear',(val) => {
    year.value = val
    getAllData()
  })
const getAllData = async() => {
  //园区网格统计表
  let res1 = await whManagerBsTbRiskHazardsHandleGridTop5StatisticYearUsingPost({path:{year:+year.value}})
  value3.value = res1.data as any
  //行业重大隐患分布
  value2.value = []
  let res2 = await whManagerBsTbRiskHazardsHandleIndustryStatistic({
    year: year.value
  })
  for(let i = 0; i<res2.data?.length; i++){
    value2.value.push(res2.data[i].count as any)
  }
  //隐患排查趋势分析
  value.value = []
  let res3 = await whManagerBsTbRiskHazardsHandleYearMonthStatistic({year:year.value})
  for(let i = 0; i<res3.data?.length; i++){
    value.value.push(res3.data[i].count as any)
  }
  //园区隐患级别统计
  let res4 = await whManagerBsTbRiskHazardsHandleLevelStatistic({year:year.value})
  //隐患整改状态统计
  let res5 = await whManagerBsTbRiskHazardsHandleStatusStatisticUsingPost({year:year.value})
  // console.log('res4',res4.data)
  // console.log('res5',res5.data)
  // console.log('value4',value4.value)

  for(let i = 0; i<res4.data?.length; i++){
    value4.value.push(res4.data[i].count)
  }
  for(let i = 0; i<res5.data?.length; i++){
    value4.value.push(res5.data[i].count)
  }
  // console.log('value4',value4.value)
  // console.log(typeof value4.value[0])
}
onMounted(async() => {
  await getAllData()
  legendData.value = [
	{
		title: "一般隐患",
		color: "#16CEB9",
		value: value4.value[0],
		percent: (value4.value[0] / (value4.value[0] + value4.value[1])) * 100,
	},
	{
		title: "重大隐患",
		color: "#66FFFF",
		value: value4.value[1],
		percent: (value4.value[1] / (value4.value[0] + value4.value[1])) * 100,
	},
	{
		title: "已整改",
		color: "#385BEA",
		value: value4.value[2],
		percent: (value4.value[2] / (value4.value[2] + value4.value[3])) * 100,
	},
	{
		title: "未整改",
		color: "#FFDC04",
		value: value4.value[3],
		percent: (value4.value[3] / (value4.value[2] + value4.value[3])) * 100,
	},
]
 option3.value.series = [
		{
			name: "状态",
			type: "pie",
			selectedMode: "single",
			color: ["#385BEA", "#FFDC04"],
			radius: [0, "60%"],
			center: ["50%", "55%"],
			label: {
				normal: {
					position: "inner",
				},
			},
			labelLine: {
				normal: {
					show: false,
				},
			},
			data: [
				{ value: value4.value[0], name: "已整改" },
				{ value: value4.value[1], name: "未整改" },
			],
		},
		{
			name: "类型",
			type: "pie",
			color: ["#16CEB9", "#66FFFF"],
			radius: ["65%", "85%"],
			center: ["50%", "55%"],
			label: {
				normal: {
					position: "inner",
				},
			},
			labelLine: {
				normal: {
					show: false,
				},
			},
			data: [
				{ value: value4.value[2], name: "一般隐患" },
				{ value: value4.value[3], name: "重大隐患" },
			],
		},
	]
})

let legendData = ref<any>([]);

const option1 = ref({
	grid: {
		containLabel: true,
		left: 0,
		top: 60,
		bottom: 20,
		right: 70,
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			lineStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: "rgba(255,255,255,0)", // 0% 处的颜色
						},
						{
							offset: 0.5,
							color: "rgba(255,255,255,1)", // 100% 处的颜色
						},
						{
							offset: 1,
							color: "rgba(255,255,255,0)", // 100% 处的颜色
						},
					],
					global: false, // 缺省为 false
				},
			},
		},
	},
	xAxis: [
		{
			name: "月",
			type: "category",
			boundaryGap: false,
			axisLabel: {
				formatter: "{value}",
				fontSize: 14,
			},
			axisLine: {
				lineStyle: {
					color: "#243753",
				},
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#2437530f",
				},
			},
			axisTick: {
				show: false,
			},
			data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
		},
	],
	yAxis: [
		{
			name: "个数",
			boundaryGap: false,
			type: "value",
			splitLine: {
				lineStyle: {
					color: "#2437530f",
				},
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#283352",
				},
			},
			axisTick: {
				show: false,
			},
		},
	],
	series: [
		{
			name: "事件数",
			type: "line",
			smooth: true,
			showSymbol: true,
			symbolSize: 8,
			zlevel: 3,
			itemStyle: {
				color: "#0286ff",
				borderColor: "#a3c8d8",
			},
			lineStyle: {
				normal: {
					width: 6,
					color: "#0286ff",
				},
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: "rgba(88,255,255,0.2)",
							},
							{
								offset: 0.8,
								color: "rgba(88,255,255,0)",
							},
						],
						false,
					),
				},
			},
			data: value,
		},
	],
});

const option2 = ref({
	grid: {
		left: "0%",
		right: "0%",
		bottom: "5%",
		top: 60,
		containLabel: true,
		z: 22,
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "line",
			lineStyle: {
				opacity: 0,
			},
		},
		formatter: function (prams) {
			if (prams[0].data === 0) {
				return "数量：0%";
			} else {
				return "数量：" + prams[0].data;
			}
		},
	},
	xAxis: {
		type: "category",
		data: ["生产制造业", "储存与批发零售", "运输业", "使用与处置"],
	},
	yAxis: {
		type: "value",
	},
	series: [
		{
			data: value2,
			type: "bar",
			barWidth: "15%",
			xAxisIndex: 0,
			yAxisIndex: 0,
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "#0286ff0f",
						},

						{
							offset: 1,
							color: "#0286ff",
						},
					]),
				},
			},
			zlevel: 11,
			showBackground: true,
			backgroundStyle: {
				color: "rgba(180, 180, 180, 0.2)",
				width: "120%",
			},
		},
	],
});

const option3 = ref({
	grid: {
		left: 300,
		bottom: "5%",
		top: 60,
		containLabel: true,
		z: 22,
	},
	tooltip: {
		trigger: "item",
		formatter: "{b}: {c} ({d}%)",
	},
	// legend: {
	// 	orient: "vertical",
	// 	x: "right",
	// 	data: ["一般隐患", "重大隐患", "已整改", "未整改"],
	// },
	series: [
		{
			name: "状态",
			type: "pie",
			selectedMode: "single",
			color: ["#385BEA", "#FFDC04"],
			radius: [0, "60%"],
			center: ["50%", "55%"],
			label: {
				normal: {
					position: "inner",
				},
			},
			labelLine: {
				normal: {
					show: false,
				},
			},
			data: [
				{ value: value4.value[0], name: "已整改" },
				{ value: value4.value[1], name: "未整改" },
			],
		},
		{
			name: "类型",
			type: "pie",
			color: ["#16CEB9", "#66FFFF"],
			radius: ["65%", "85%"],
			center: ["50%", "55%"],
			label: {
				normal: {
					position: "inner",
				},
			},
			labelLine: {
				normal: {
					show: false,
				},
			},
			data: [
				{ value: value4.value[2], name: "一般隐患" },
				{ value: value4.value[3], name: "重大隐患" },
			],
		},
	],
});


</script>

<template>
	<div class="riskStatisticPage">
		<div class="chartBox">
			<div class="chartTitle">隐患排查趋势分析</div>
			<div class="chartContent">
				<BaseEchart :option="option1"></BaseEchart>
			</div>
		</div>
		<div class="chartBox">
			<div class="chartTitle">行业重大隐患分布</div>
			<div class="chartContent">
				<BaseEchart :option="option2"></BaseEchart>
			</div>
		</div>
		<div class="chartBox">
			<div class="chartTitle">园区网格隐患统计表TOP5</div>
			<div class="chartContent" style="padding: 20px 40px 0px 0px">
				<el-table
					:data="value3"
					show-overflow-tooltip
					style="width: 100%; height: 100%"
					:border="true"
					size="large"
				>
					<el-table-column type="index" width="80" label="排名" />
					<el-table-column prop="gridName" label="网格区域" />
					<el-table-column prop="enterpriseNum" label="包含企业数" width="160" />
					<el-table-column prop="riskHazardsNum" label="重大隐患数" width="160" />
				</el-table>
			</div>
		</div>
		<div class="chartBox">
			<div class="chartTitle">园区隐患级别统计</div>
			<div class="chartContent">
				<BaseEchart style="width: 50%" :option="option3"></BaseEchart>
				<div class="legendBox">
					<div class="legendItem" v-for="(item, i) in legendData" :key="i">
						<div
							class="colorBlock"
							:style="`background-color:${item.color};border-radius:50% 50%;width:15px;height:15px;`"
							:color="item.color"
						></div>
						<div>{{ item.title }}</div>
						<div>{{ item.percent.toFixed(2) }}%</div>
						<div>{{ item.value }}个</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.riskStatisticPage {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	.chartBox {
		width: 49%;
		height: 50%;
		display: flex;
		flex-direction: column;
		font-size: 22px;
		font-weight: 500;
		.chartTitle {
			height: 32px;
		}
		.chartContent {
			width: 100%;
			height: calc(100% - 32px);
			display: flex;
			align-items: center;
			font-weight: 500;
			.legendBox {
				width: 304px;
				height: 155px;
				/* background-color: green; */
				font-size: 14px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.legendItem {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					div {
						width: 25%;
					}
				}
			}
		}
	}
}
</style>